<template>
    <div id="container_app">
       <el-dialog
        :visible.sync="centerDialogVisible"
        :close-on-click-modal="false"
        :before-close="close"
        append-to-body
        width="60%"
        top="4vh"
       >
        <div slot="title">
            <span style="text-align: center;font-size: 20px;color: #000; display: flex;justify-content: center;">新增每周之星</span>
        </div>
        <div class="integral_content">
            <!-- 顶部操作区 -->
            <div class="integral_content_top">
                <div class="wrap_inp">
                    <span class="text_lable">昵称:</span>
                    <div class="btn">
                      <el-input v-model="newWeeklyStarObj.nickname"></el-input>
                    </div>
                </div>
                <div class="wrap_inp">
                    <span class="text_lable">手机:</span>
                    <div class="btn">
                      <el-input v-model="newWeeklyStarObj.mobilePhone"></el-input>
                    </div>
                </div>
                <div class="wrap_inp" style="width: auto;">
                    <span class="text_lable" style="width:50%">真实姓名:</span>
                    <div class="btn" style="width: 50%;margin-left:-20px;">
                      <el-input v-model="newWeeklyStarObj.name"></el-input>
                    </div>
                </div>
                <div class="wrap_inp">
                    <span class="text_lable">会员:</span>
                    <div class="btn">
                        <el-select v-model="newWeeklyStarObj.member">
                            <el-option :label="item.name" :value="item.id" v-for="item in memberList" :key="item.id"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="wrap_inp">
                    <span class="text_lable">星级:</span>
                    <div class="btn">
                        <el-select v-model="newWeeklyStarObj.starId">
                            <el-option :label="item.name" :value="item.id" v-for="item in starList" :key="item.id"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="wrap_inp">
                    <span class="text_lable">性别:</span>
                    <div class="btn">
                        <el-select v-model="newWeeklyStarObj.region">
                            <el-option :label="item.name" :value="item.id" v-for="item in genderSet" :key="item.id"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="wrap_inp2">
                    <div class="text_lable">
                      <el-button type="primary" icon="el-icon-search" @click.native="search()">搜索</el-button>
                    </div>
                </div>
            </div>
            <!-- 表格内容 -->
            <div class="integral_content_conter">
                <template>
                    <el-table ref="multipleTable" :data="tableData" style="width: 100%" height="300" border
                              :header-cell-style="{backgroundColor: '#FAFAFA',color: '#000'}" v-loading="loading" element-loading-text="数据加载中..."
                              @selection-change="selectDeleta" @select-all="selectAllList">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="nickname" label="昵称"></el-table-column>
                        <el-table-column label="头像">
                            <template slot-scope="scope">
                                <el-avatar size="medium" :src="scope.row.userImg"></el-avatar>
                            </template>
                        </el-table-column>
                        <el-table-column label="手机" show-overflow-tooltip width="105">
                        <template slot-scope="scope">
                            {{ scope.row.mobilePhone ? scope.row.mobilePhone.replace(/(\d{3})(\d{4})(\d{4})/g, '$1****$3') : '' }}
                        </template>
                        </el-table-column>
                        <el-table-column prop="name" label="真实实名"></el-table-column>
                        <el-table-column prop="sex" label="性别"></el-table-column>
                        <el-table-column prop="age" label="年龄"></el-table-column>
                        <el-table-column prop="residence" label="居住地"></el-table-column>
                        <el-table-column prop="education" label="学历"></el-table-column>
                        <el-table-column prop="starId" label="星级" sortable></el-table-column>
                        <el-table-column prop="member" label="会员"></el-table-column>
                        <el-table-column prop="activity" label="活动" sortable>
                        <template slot-scope="scope">
                            {{ scope.row.activity }}次
                        </template>  
                        </el-table-column>
                    </el-table>
                </template>
            </div>
            <!-- 底部分页 -->
            <div class="romanUser-container-footer_page">
                <template>
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 15, 20, 30, 50]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </template>
            </div>
            <!-- 选中区域 -->
            <div class="integral_content_footer">
                <span style="font-size:15px; color: #222; font-weight:600;">已选</span>
                <div class="integral_content_footer_ctn"  v-if="listId && listId.length > 0">
                    <div class="integral_content_footer_ctn_top" v-for="item in listId" :key="item.id">
                        <div class="closeIcon" @click="deleteUser(item)">x</div>
                        <div style="margin-top: -15px;">
                            <el-avatar size="medium" :src="item.userImg"></el-avatar>
                        </div>
                        <span>{{item.nickname}}</span>
                    </div>
                </div>
                <div v-else>
                  <span style="display: flex; align-items: center;justify-content: center; color: #999">暂无数据</span>
                </div>     
            </div>
        </div>  
        <!-- 按钮区域 -->
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="resetForm()">确 定</el-button>
        </div>
       </el-dialog>
    </div>
</template>

<script>
export default {
  name: "newWeeklyStar",
  data() {
    return {
      centerDialogVisible: true,  
      loading: false,
      newWeeklyStarObj: {
        nickname: null,
        mobilePhone: null,
        name: null,
        member: '0',
        starId: '2',
        region: '0',
      },
      total: 23,  // 总条数
      pageSize: 10, // 一页10条
      pageNumber: 1, // 页数
      currentPage: 1,  // 当前第几页
      memberList: [
        { id: '0', name: '游客' },
        { id: '1', name: '普通会员' },
        { id: '2', name: '荣誉会员' },
        { id: '3', name: 'VIP会员' },
        { id: '4', name: '超级会员' },
      ],
      starList: [
        { id: '0', name: '全部' },
        { id: '1', name: '1星' },
        { id: '2', name: '2星' },
        { id: '3', name: '3星' },
        { id: '4', name: '4星' },
        { id: '5', name: '5星' }
      ],   
      genderSet: [
        { id: '0', name: '全部' },
        { id: '1', name: '男' },
        { id: '2', name: '女' },
      ],
      tableData: [],
      listId: [],
      istrue: false,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 关闭弹框；
    closenewWeeklyStar(){
      this.centerDialogVisible = false;
    },
    close(){
      this.$emit('closenewWeeklyStar');
    },
    // 确定
    resetForm() {
      if (this.listId && this.listId.length <= 0) {
        this.$message.warning('你还没有选择罗曼用户！');
      }else{
        this.close()
        this.$emit('selectedUsers',this.listId)
        this.$message.success('增加成功！');
      }
    },
    // 搜索
    search() {
      this.getData()
    },
    // 获取表格列表
    getData(){
      this.loading = true;
      const number = Math.round(Math.random()*1500); 
      setTimeout(() => {
        const list = [
          {
            lmId: '88121',
            nickname: '落叶11', 
            userImg: '',
            mobilePhone: '15219571006',
            name: '虹雪飘',
            idNumber: '440983200009233811',
            sex: '女',
            age: '21',
            residence: '广东深圳',
            height: '180',
            education: '本科',
            starId: '2',
            memberId: '4',
            member: '超级VIP',
            integral: 100, 
            illegalchat: '3次',
            forbidden: '永久',
            activity: 1,
            visitToday: 1,
            daysRemaining: 1,
          },
          {
            lmId: '88122',
            nickname: '夏天12', 
            userImg: '',
            mobilePhone: '15219571006',
            name: '夏白白',
            idNumber: '440983200009233811',
            sex: '女',
            age: '22',
            residence: '广东广州',
            height: '180',
            education: '本科',
            starId: '1',
            memberId: '1',
            member: '普通会员',
            integral: 100, 
            illegalchat: '无',
            forbidden: '永久',
            activity: 3,
            visitToday: 2,
            daysRemaining: 3,
          },
          {
            lmId: '88123',
            nickname: '秋风13', 
            userImg: '',
            mobilePhone: '15219571006',
            name: '小王',
            idNumber: '440983200009233811',
            sex: '男',
            age: '19',
            residence: '广东佛山',
            height: '180',
            education: '本科',
            starId: '3',
            memberId: '2',
            member: '荣誉会员',
            integral: 100, 
            illegalchat: '无',
            forbidden: '永久',
            activity: 3,
            visitToday: 3,
            daysRemaining: 5,
          },
          {
            lmId: '88124',
            nickname: '晚霞14', 
            userImg: '',
            mobilePhone: '15219571006',
            name: '张灰灰',
            idNumber: '440983200009233811',
            sex: '女',
            age: '23',
            residence: '福州厦门',
            height: '180',
            education: '本科',
            starId: '4',
            memberId: '2',
            member: '荣誉会员',
            integral: 100, 
            illegalchat: '3次',
            forbidden: '永久',
            activity: 5,
            visitToday: 5,
            daysRemaining: 2,
          },
          {
            lmId: '88125',
            nickname: '冰雪15', 
            userImg: '',
            mobilePhone: '15219571006',
            name: '杨嘿嘿',
            idNumber: '440983200009233811',
            sex: '男',
            age: '19',
            residence: '广东深圳',
            height: '180',
            education: '本科',
            starId: '5',
            memberId: '3',
            member: 'VIP会员',
            integral: 100, 
            illegalchat: '1次',
            forbidden: '永久',
            activity: 4,
            visitToday: 2,
            daysRemaining: 3,
          },
          {
            lmId: '88126',
            nickname: '落叶16', 
            userImg: '',
            mobilePhone: '15219571006',
            name: '杨灰灰',
            idNumber: '440983200009233811',
            sex: '男',
            age: '20',
            residence: '广东广州',
            height: '180',
            education: '本科',
            starId: '5',
            memberId: '4',
            member: '超级会员',
            integral: 100, 
            illegalchat: '无',
            forbidden: '永久',
            activity: 5,
            visitToday: 1,
            daysRemaining: 1,
          },
          {
            lmId: '88127',
            nickname: '落叶17', 
            userImg: '',
            mobilePhone: '15219571006',
            name: '杨灰灰',
            idNumber: '440983200009233811',
            sex: '男',
            age: '20',
            residence: '广东广州',
            height: '180',
            education: '本科',
            starId: '1',
            memberId: '1',
            member: '普通会员',
            integral: 100, 
            illegalchat: '无',
            forbidden: '永久',
            activity: 6,
            visitToday: 2,
            daysRemaining: 1,
          },
          {
            lmId: '88128',
            nickname: '落叶18', 
            userImg: '',
            mobilePhone: '15219571006',
            name: '杨灰灰',
            idNumber: '440983200009233811',
            sex: '男',
            age: '20',
            residence: '广东广州',
            height: '180',
            education: '本科',
            starId: '1',
            memberId: '1',
            member: '普通会员',
            integral: 100, 
            illegalchat: '8次',
            forbidden: '永久',
            activity: 7,
            visitToday: 6,
            daysRemaining: 1,
          },
          {
            lmId: '88129',
            nickname: '落叶19', 
            userImg: '',
            mobilePhone: '15219571006',
            name: '杨灰灰',
            idNumber: '440983200009233811',
            sex: '男',
            age: '20',
            residence: '广东广州',
            height: '180',
            education: '本科',
            starId: '2',
            memberId: '2',
            member: '荣誉会员',
            integral: 100, 
            illegalchat: '无',
            forbidden: '永久',
            activity: 23,
            visitToday: 9,
            daysRemaining: 1,
          },
          { 
            lmId: '88130',
            nickname: '落叶20', 
            userImg: '',
            mobilePhone: '15219571006',
            name: '杨灰灰',
            idNumber: '440983200009233811',
            sex: '男',
            age: '20',
            residence: '广东广州',
            height: '180',
            education: '本科',
            starId: '1',
            memberId: '4',
            member: '超级VIP',
            integral: 100, 
            illegalchat: '1次',
            forbidden: '永久',
            activity: 8,
            visitToday: 1,
            daysRemaining: 1,
          },
          {
            lmId: '8813121',
            nickname: '落叶21', 
            userImg: '',
            mobilePhone: '15219571006',
            name: '杨灰灰',
            idNumber: '440983200009233811',
            sex: '男',
            age: '20',
            residence: '广东广州',
            height: '180',
            education: '本科',
            starId: '3',
            memberId: '1',
            member: '普通会员',
            integral: 100, 
            illegalchat: '2次',
            forbidden: '永久',
            activity: 9,
            visitToday: 2,
            daysRemaining: 1,
          },     
        ];
        this.tableData = list;
        this.loading = false;
      },number)
    },
    // 分页功能 
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;  // 选择几条一页
      this.getData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;   // 当前页
      this.pageNumber = val; // 页数
      this.getData()
    },
    // 选中数据
    selectDeleta(selection){
      this.listId = selection
      this.istrue = false;  
    },
    // 全选
    selectAllList(selection){
      this.listId = selection;
      this.istrue = true;
    },
    // 删除选中的
    deleteUser(item){
      if (this.listId && this.listId.length > 0) {
        this.listId.forEach( (item2,index) => {
          if (item2.lmId === item.lmId) {
            this.listId.splice(index, 1);
            this.$refs.multipleTable.toggleRowSelection(item2,false);
          }
        })
      }
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
.integral_content{
    margin-top: -5px;
    .integral_content_top{
       display: flex;
       .wrap_inp {
        width: 20%;
        display: flex;
        align-items: center;
        margin-right: 10px;
        .text_lable {
          width: auto;
          margin-right: 10px;
        }
        .btn {
          width: 60%;
        }
      }
      .wrap_inp2{
        display: flex;
        justify-content: flex-end;
      }
    }
    .integral_content_conter{
        margin-top: 20px;
    }
    .romanUser-container-footer_page {
        padding: 15px;
        display: flex;
        justify-content: end;
        border: 1px solid #EBEEF5;
        border-top: none;
    }
    .integral_content_footer{
        margin-top: 20px;
        .integral_content_footer_ctn{
            width: 100%;
            height:107px;
            overflow: auto;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .integral_content_footer_ctn_top{
                margin-top: 8px;
                width: 10.8%;
                border: 1px solid #EBEEF5;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 14px 20px;
                margin-right: 15px;
            }
        }
        .closeIcon{
            width: 22px;
            height: 22px;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
            background-color: red;
            font-size: 10px !important;
            font-weight: bold;
            color:#fff;
            position: relative;
            right: -39px;
            top: -13px;
        }
    }
}
</style>
<style lang="less">

</style>
